<template>
  <div>
    <a-upload-dragger accept=".xls,.xlsx" :showUploadList="false" :before-upload="beforeUpload">
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击或者拖动文件到该区域来上传</p>
      <p class="ant-upload-hint">
        请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
      </p>
    </a-upload-dragger>
    <a-card class="mt-2" v-if="data.length">
      <a-table bordered :columns="columns" :data-source="data" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import ExcelParser from '@/utils/ExcelParser';
  import { InboxOutlined } from '@ant-design/icons-vue';

  const data = ref<any[]>([]);
  const columns = ref<any[]>([]);

  function beforeUpload(file) {
    ExcelParser.parse(file)
      .then((res: any[]) => {
        columns.value = Object.keys(res[0]).map((i) => {
          return {
            title: i,
            dataIndex: i,
          };
        });
        data.value = res;
      })
      .catch((e) => console.error(e));
    return false;
  }
</script>

<style scoped></style>
